import React, { Component } from 'react'
import { Table,Button,Modal,Input  } from 'antd';
import request from '../util/request';
const { TextArea } = Input;


let doctor = ['皮肤医生','注射医生','私密医生','口腔医生'];
let manger = ['董事长','总经理','技术院长'];

class Main extends Component {
    componentDidMount(){
        this.getList();
    }

    getList = () => {
        let {pagenum,limit} = this.state;
        request.get('/api/list',{pagenum,limit}).then(res => {
            if(res.code === 1){
                this.setState({
                    list:res.data,
                    total:res.total
                })
            }
        })
    }
    showModal = () => {
        this.setState({
          visible: true,
        });
    };

    //重置表单
    reset = () => {
        this.setState({
            phone:'',      //手机号
            nick_name:'',  //用户名称
            id_card:'',    //身份证号
            tags:[],       //标签
            role:'',       //角色
            address:'',    //公司地址
            info:'',       //跟进进度
            id:''
        })
    }
    
    handleOk = e => {
        console.log(e);

        //编辑还是添加
        
        
        //调添加的接口  [1,2,3] ===> 1,2,3  join  1,2,3 => [1,2,3]  split(',')
        //nick_name,phone,tags,role,id_card,address,info,end
        let {nick_name,phone,tags,role,id_card,address,info,end,id} = this.state;
        tags = tags.join(',')
        let url = '';
        if(id){
            //编辑  /api/edit
            url = '/api/edit';
        }else{
            //添加  /api/add
            url = '/api/add';
        }
        if(nick_name && phone && tags && id_card && address && info && end){
            request.post(url,{nick_name,phone,tags,role,id_card,address,info,end,id}).then(res=>{
                this.setState({
                    visible: false,
                });
                if(res.code === 1){
                    console.log(res);
                    alert(id?"编辑成功":"添加成功");
                    this.getList();
                }else if(res.code === 5){
                    alert("您没有添加的权限")
                    return false
                }else{
                    alert("添加失败")
                }
                this.reset();//重置表单
            })
        }else{
            alert("有字段未输入")
        }
        
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
        this.reset();//重置表单
    };

    //删除
    del = () => {
        let {ids} = this.state;
        if(ids){
            //调删除的接口  //
            request.delete('/api/del',{ids}).then(res => {
                console.log(res);
                if(res.code === 1){
                    alert("删除成功");
                    this.getList();
                }else if(res.code === 5){
                    alert("您没有此权限")
                }else{
                    alert("删除失败")
                }
            })
        }else{
            alert("参数有误")
        }
    }
    state = {
        list:[], //列表数据
        pagenum:1, //查看数据页码
        limit:5,    //每页展示的条数
        total:0,    //总条数
        visible:false, //控制弹窗显示隐藏
        phone:'',      //手机号
        nick_name:'',  //用户名称
        id_card:'',    //身份证号
        tags:[],       //标签
        role:'',       //角色
        address:'',    //公司地址
        info:'',       //跟进进度
        end:'安卓',      //终端
        ids:'',         //删除ids
        id:''          //编辑的id
    }
    render() {
          // rowSelection object indicates the need for row selection
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(selectedRowKeys)
                this.setState({
                    ids:selectedRowKeys.join(',')
                })
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        };
        const columns = [
            {
              title: '用户昵称',
              dataIndex: 'nick_name',
              render: text => <a>{text}</a>,
            },
            {
              title: '手机号',
              dataIndex: 'phone',
            },
            {
              title: '标签',
              dataIndex: 'tags',
            },
            {
                title: '用户身份',
                dataIndex: 'role',
            },
            {
                title: '身份证',
                dataIndex: 'id_card',
            },
            {
                title: '公司地址',
                dataIndex: 'address',
            },
            {
                title: '跟进记录',
                dataIndex: 'info',
            },
            {
                title: '注册事件',
                dataIndex: 'create_time',
            },
            {
                title: '注册终端',
                dataIndex: 'end',
            },
            {
                title:'操作',
                render:(text, record)=>{
                    console.log("text,",text)
                    console.log("recode",record)
                   
                    return <div>
                        <Button onClick={()=>{this.edit(text)}}>编辑</Button>
                        <Button onClick={() => this.see(text)}>查看</Button>
                    </div>
                }
            }
        ];
        let {list,limit,total,phone,nick_name,id_card,role,address,info,tags} = this.state;
        return (
            <div>
                <Button onClick={this.showModal}>添加</Button>
                <Button  type="danger" onClick={this.del}>删除</Button>
                <Button onClick={this.exit}>退出</Button>
                <Table rowKey="id" 
                    rowSelection={rowSelection} 
                    columns={columns} 
                    dataSource={list} 
                    pagination={{
                        pageSize:limit,
                        total,
                        onChange:this.changePage
                    }} 
                />
                <Modal
                    title="添加用户"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    >
                    <Input placeholder="手机号码" name="phone" value={phone} onChange={this.changeIpt}/>
                    <Input placeholder="用户名称" name="nick_name"  value={nick_name} onChange={this.changeIpt}/>
                    <Input placeholder="身份证号" name="id_card" value={id_card} onChange={this.changeIpt}/>
                    <Input placeholder="用户身份" name="role" value={role} onChange={this.changeIpt}/>
                    <Input placeholder="公司地址" name="address" value={address} onChange={this.changeIpt}/>
                    <h1>标签</h1>
                    <ul>
                        {tags.map((item,ind) => <li key={ind}>{item}</li> )}
                    </ul>
                    <div>
                        <h1>职业-医生</h1>
                        <ul>
                            {doctor.map((item,ind) => <li onClick={()=>{this.choose(item)}} key={ind}>{item}</li>)}
                        </ul>
                        <h1>职业-管理者</h1>
                        <ul>
                            {manger.map((item,ind) => <li onClick={()=>{this.choose(item)}} key={ind}>{item}</li>)}
                        </ul>
                    </div>
                    <TextArea rows={4}  name="info" value={info} onChange={this.changeIpt}/>
                </Modal>
            </div>
        )
    }

    //编辑
    edit = (target) => {
        // phone:'',      //手机号
        // nick_name:'',  //用户名称
        // id_card:'',    //身份证号
        // tags:[],       //标签
        // role:'',       //角色
        // address:'',    //公司地址
        // info:'',       //跟进进度
        // end:'安卓',      //终端
        // id:''          //编辑的id
        let {phone,nick_name,id_card,tags,role,address,info,id} = target;
        this.setState({
            phone,
            nick_name,
            id_card,
            tags:tags.split(','),
            role,
            address,
            info,
            id,
            visible:true
        })
    }

    see = (obj) => {
        let {phone,nick_name,id_card,tags,role,address,info} = obj;
        this.setState({
            phone,
            nick_name,
            id_card,
            tags:tags.split(','),
            role,
            address,
            info,
            visible:true
        })
    }

    //退出
    exit = () => {
        localStorage.removeItem('token');
        this.props.history.push('/login');
    }

    choose = (item) => {
        let {tags} = this.state;
        let ind = tags.indexOf(item); //下标
        if(ind != -1){
            //找到了
            tags.splice(ind,1);
        }else{
            tags.push(item)
        }
        this.setState({tags})
    }

    //受控表单
    changeIpt = (e) => {
        console.log(e.target.name)  //phone id_card
        //设置phone的值
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    //修改页码
    changePage = (page) => {
        console.log("page",page)
        this.setState({  //异步的方法
            pagenum:page
        },() => {
            this.getList();
        })
    }
}

export default Main
